<template>
<div class="container">
  <headers title="上传图片" :refresh="isRefresh" :path="path"></headers>
  <div class="content">
    <img-uploader @imgloaded="getImgSrc"></img-uploader>
    <div class="content-block">
      <div class="col-50">
        <a class="button button-big button-fill button-danger" @click="taskFinished">
          确认上传
        </a>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import ImgUploader from '../components/ImgUploader'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
  },
  data () {
    return {
      imgsrc: [],
      taskId: this.$route.params.taskId,
      customerId: store('customerId') || 0,
      customerTaskId: this.$route.params.customerTaskId,
      path: '/task_details/' + this.$route.params.taskId
    }
  },
  methods: {
    getImgSrc (data) {
      this.$set('imgsrc', data)
    },
    taskFinished () {
      if (this.imgsrc.length > 0) {
        $.showIndicator()
        this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/customerTaskFinished', {
          params: {
            id: this.customerTaskId,
            customerId: this.customerId,
            taskId: this.taskId,
            imageUrl: this.imgsrc.join(',')
          }
        }).then((data) => {
          $.hideIndicator()
          if (data.data.success) {
            $.alert(data.data.message, () => {
              this.$router.replace('/kaishizhuan')
            })
          }
          else {
            $.alert(data.data.message)
          }
        }, () => {
          $.hideIndicator()
          $.alert('网络异常')
        })
      }
      else {
        $.alert('请先上传图片')
      }
    }
  },
  components: {
    Headers,
    ImgUploader
  }
}
</script>